<template>



	<gui-datetime @confirm="confirm" :value="val" :isTime="false">
		<view class="gui-flex gui-space-between gui-align-items-center">
			<view class="gui-flex1">
				<text :style="{'color':!val?'gray':''}" class="gui-form-input gui-ellipsis">{{val||placeholder}}</text>
			</view>
			<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
		</view>
	</gui-datetime>

</template>

<script>
	export default {
		name: "hyb-time-selector",
		props: {
			name: {
				type: String,
				default: ""
			},

			placeholder: {
				type: String,
				default: "请选择时间"
			},
			modelValue: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				val: ''
			};
		},

		watch: {

			modelValue: {
				immediate: true,
				handler: function(val) {
					if (val) {
						this.val = val;
					}
				}
			}
		},


		created() {
			this.val = this.modelValue
		},

		methods: {
			confirm: function(e) {
				// 返回选中城市的编号及文本信息
				this.val = e[0] + '-' + e[1] + '-' + e[2];
				setTimeout(() => {
					this.$emit('input', this.val)
					this.$emit('update:modelValue', this.val)
				})
			},
		}
	}
</script>

<style>
</style>
